import { renderContext, observable } from '../../src/runtime';
import * as flexBox from '../../src/container/flex-box';
import * as gridBox from '../../src/container/grid-box';

import Greeting from './Greeting.vue';

const render = renderContext({
  componentMap: {
    FlexBox: flexBox.View,
    GridLayout: gridBox.View,
    Greeting,
  },
});

const model = observable({
  name: 'Jack',
  number: -1,
  direction: 'vertical',
});

render(
  '#handwrite',
  {
    name: 'test',
    type: 'GridLayout',
    props: {
      name: (vm) => vm.direction,
    },
    elements: [
      {
        name: 'test2',
        type: 'FlexBox',
        props: {
          dir: (vm) => vm.direction,
        },
        elements: [
          {
            name: 'test3',
            type: 'Greeting',
            props: {
              number: 100,
            },
            on: {
              click(args) {
                console.log(args);
              },
            },
          },
          {
            name: 'test4',
            type: 'Greeting',
            props: {
              number: (vm) => {
                return Math.abs(vm.number);
              },
            },
            on: {
              click(args, vm) {
                vm.number++;
                vm.direction =
                  vm.direction === 'vertical' ? 'horizontal' : 'vertical';
              },
            },
          },
        ],
      },
    ],
  },
  model,
);
